<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue中的数据代理</title>
</head>
<!-- 引入Vue.js -->
<script type="text/javascript" src="../js/vue.js"></script>
    <body>
        <!--
            1.Vue中的数据代理通过vm对象来代理data对象中属性的操作（读/写）；
            2.Vue中数据代理的好处
                更加方便的操作data中的数据。
            3.基本原理
                通过Object.defineProperty()把data对象中的所有属性添加到vm上；
                为每一个添加到vm上的属性，都指定一个getter/setter；
                在getter/setter内去操作（读/写）data中对应的属性。
        -->
        <!-- 准备一个容器 -->
        <div id="root">
            <h1>学校名称：{{name}}</h1><br/>
            <h1>学校地址：{{address}}</h1>
        </div>

        <script type="text/javascript">
            const vm = new Vue({
                el:"#root",
                data:{
                    name:'广西科技师范学院',
                    address:'广西来宾市兴宾区铁北大道966号'
                }
            })
        </script>
        
    </body>
</html>